<template>
  <div class="container">
    <n-page-header :title="route.params?.user_id == null ? '创建新漂流瓶' : '发起咨询'" @back="toBack">
      <template #extra v-if="route.params?.user_id != null">
        <n-button type="primary" @click="toRecharge">去充值</n-button>
      </template>
    </n-page-header>

    <div class="form">
      <n-p depth="3" v-if="route.params?.user_id != null && consulterProfile?.consult_price != null">
        本次咨询价格：{{ consulterProfile?.consult_price }}金币
      </n-p>

      <n-input type="textarea"
               v-model:value="form.content"
               placeholder="在这里，输入你想说的话"
               maxlength="500"
               show-count
               :disabled="requesting"
      />

      <n-p class="message-type" v-if="route.params?.user_id == null">
        类型
        <n-switch v-model:value="typeSwitch">
          <template #checked>
            公开
          </template>
          <template #checked-icon>
            <n-icon size="10">
              <IconEarth style="height: 100%; width: 100%" />
            </n-icon>
          </template>

          <template #unchecked>
            私密
          </template>
          <template #unchecked-icon>
            <n-icon size="10">
              <IconPrivate style="height: 100%; width: 100%" />
            </n-icon>
          </template>
        </n-switch>
      </n-p>

      <n-button type="primary"
                @click="create"
                :loading="requesting"
                :disabled="requesting"
      >
        {{route.params?.user_id == null ? "丢向大海" : "发起咨询"}}
      </n-button>
    </div>
  </div>
</template>

<script setup>

import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import IconEarth from "@/components/icons/IconEarth.vue";
import IconPrivate from "@/components/icons/IconPrivate.vue"

const route = useRoute()
const router = useRouter()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const toBack = () => {
  router.back()
}
const typeSwitch = ref(true)
const form = ref({
  topic_id: null,
  type: null,
  receive_user_id: route.params?.user_id,
  content: null
})

const requesting = ref(false)
const create = () => {
  requesting.value = true

  if (route.params?.user_id == null) {
    form.value.type = typeSwitch.value ? 0 : 1
  } else {
    form.value.type = 2
  }
  requests.message.new(form.value).then(resp => {
    requesting.value = false
    if (resp.ret === 0) {
      message.success(route.params?.user_id != null ? '已发起咨询' : '漂流瓶已出发')
      toBack()
    } else {
      message.error(resp?.data ?? resp?.msg ?? "未知错误")
    }
  }).catch(err => {
    requesting.value = false

    console.log(err)
    notify.error({content: "出错了", meta: err.toString(), duration: 1500})
  })
}

const consulterProfile = ref(null)
const getProfile = () => {
  if (route.params?.user_id != null) {
    requests.profile.getById(route.params?.user_id).then(resp => {
      if (resp.ret === 0) {
        consulterProfile.value = resp.data
      }
    })
  }
}

const toRecharge = () => {
  router.push({name: "UserWalletView"})
}

if (route.params?.user_id != null) {
  getProfile()
}
</script>

<style lang="scss" scoped>
.form {
  margin-top: 1.5rem;

  .message-type {
    display: flex;
    align-items: center;
    font-size: 1rem;

    .n-switch {
      margin-left: .5rem;
    }
  }

  .n-button {
    margin-top: 1rem;
  }
}
</style>
